<template>
  <view>
    <view class="bg">
      <view class="loginBox">
        <u-field v-model="form.username" label="用户名" placeholder="请输入用户名" required></u-field>
        <u-field v-model="form.password" :password="true" label="密码" placeholder="请输入密码" required></u-field>
        <!-- <u-checkbox-group>
						<u-checkbox  v-model="t" active-color="red">记住我</u-checkbox>
					</u-checkbox-group> -->
        <br>
        <br>
        <u-button size="medium" :loading="isLoading" type="primary" @tap="login">登录</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        isLoading: false
      }
    },
    onLoad() {
      
    },
    methods: {
      login() {
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bg {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    /* 将当前容器变为弹性容器 */
    display: flex;
    flex-direction: column;
    /* 主轴方向 */
    justify-content: center;
    /*  */
    align-items: center;
  }

  .loginBox {
    width: 500rpx;
    height: 400rpx;
    background-color: rgba(255, 255, 255, .7);
    /* 半透明 */
    margin: auto;
    /* 自动居中 */
    border-radius: 30rpx;
    /* 圆角 */
    padding: 30rpx;
    /* 内边距 */
    margin-top: 70rpx;
  }
</style>
